<template>
  <div style="height: 5000px;" class="background">

<!--    <div class="block" style="text-align: center">-->
<!--      <span class="demonstration">数据查询</span>-->
<!--      <el-date-picker-->
<!--        v-model="valuedate"-->
<!--        type="daterange"-->
<!--        align="right"-->
<!--        unlink-panels-->
<!--        range-separator="至"-->
<!--        start-placeholder="开始日期"-->
<!--        end-placeholder="结束日期"-->
<!--        :picker-options="pickerOptions"-->
<!--        format="yyyy 年 MM 月 dd 日"-->
<!--        value-format="yyyy-MM-dd"-->
<!--      >-->
<!--      </el-date-picker>-->
<!--      <el-button type="primary" @click="onSubmit">查询</el-button>-->
<!--    </div>-->

    <el-row class="tac"  style="background:  rgba(131,116,116,0.06);margin-top: 20px">
      <el-col :span="4" :offset="1" >
        <div class="box1">
          <div><h3>总发帖数</h3></div>
          <div style="margin-top: 20px"><h1 v-if="sum1.count!=''" style="font-size: 20px;color: #6f42c1">{{sum1.count}}</h1><h1 v-if="sum1.count==''||sum1.count==null">0</h1></div>
        </div>
<!--        <div class="box1">-->
<!--          <div><h3>发布贴子</h3></div>-->
<!--          <div style="margin-top: 20px"><h1 v-if="postnumber!=''" style="font-size: 20px;color: #6f42c1">{{postnumber}}</h1><h1 v-if="postnumber==''||postnumber==null">0</h1></div>-->
<!--        </div>-->
      </el-col>

      <el-col :span="4" :offset="2" >
        <div class="box1">
          <div><h3>帖子总评论量</h3></div>
          <div style="margin-top: 20px"><h1  v-if="sum1.sumcomment_counts!=''" style="font-size: 20px;color: #6f42c1">{{sum1.sumcomment_counts}}</h1><h1 v-if="sum1.sumcomment_counts==null||sum1.sumcomment_counts==''">0</h1></div>
        </div>
<!--        <div class="box1">-->
<!--          <div><h3>发布评论</h3></div>-->
<!--          <div style="margin-top: 20px"><h1 v-if="Commentsnumber!=''" style="font-size: 20px;color: #6f42c1">{{Commentsnumber}}</h1><h1 v-if="Commentsnumber==''||Commentsnumber==null">0</h1></div>-->
<!--        </div>-->
      </el-col>

      <el-col :span="4" :offset="2">
        <div class="box1">
          <div><h3>帖子总点赞数</h3></div>
          <div style="margin-top: 20px"><h1 v-if="sum1.sumup_counts!=''" style="font-size: 20px;color: #6f42c1">{{sum1.sumup_counts}}</h1><h1 v-if="sum1.sumup_counts==null||sum1.sumup_counts==''">0</h1></div>
        </div>
<!--        <div class="box1">-->
<!--          <div><h3>发表提问</h3></div>-->
<!--          <div style="margin-top: 20px"><h1  v-if="Interlocutionnumber!=''" style="font-size: 20px;color: #6f42c1">{{Interlocutionnumber}}</h1><h1 v-if="Interlocutionnumber==''||Interlocutionnumber==null">0</h1></div>-->
<!--        </div>-->
      </el-col>

      <el-col :span="4" :offset="2">
        <div class="box1">
          <div><h3>帖子总点击数</h3></div>
          <div style="margin-top: 20px"><h1 v-if="sum1.sumview_counts!=''" style="font-size: 20px;color: #6f42c1">{{sum1.sumview_counts}}</h1><h1 v-if="sum1.sumview_counts==null||sum1.sumview_counts==''">0</h1></div>
        </div>
      </el-col>
    </el-row>
    <!--  <div><h2>数据图表</h2></div>-->




    <div style="display: flex;margin-top: 70px">
      <div id="ciyun" style="width: 600px; height: 600px"></div>
      <div id="ping" style="width: 400px;height:600px;margin-left: 400px"></div>
    </div>
    <div id="paixutu2" style="height:400px;width: 600px;margin-left: 300px"></div>
    <div style="display: flex;margin-top: 70px">
    <div id="paixutu" style="height:400px;width: 600px"></div>
    <div id="main" style="height:400px;margin-top: 20px;width: 600px"></div>
    </div>

    <div class="block" style="text-align: center;margin-top: 20px">
      <span class="demonstration">查询我的数据</span>
      <el-date-picker
        v-model="value1"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        format="M月"
        value-format="M"
      >
      </el-date-picker>
      <el-button type="primary" @click="selectpostBYmonth" >查询</el-button>
    </div>
    <div id="myChart" style="height:400px;margin-top: 20px"></div>
  </div>
</template>


<script>
import * as echarts from 'echarts';
import theme from '../assets/theme.json'
export default {
  name: 'Data',
  data() {
    return {
      value1:'',
      username: "",
      user: '',
      tip:2022,
      postnumber:'',
      Interlocutionnumber:'',
      Commentsnumber:'',
      sum1:[],
      sum2:[],
      // sumpost:'',
      // sumgood:'',
      // sumview:'',
      // sumcomment:'',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      valuedate: '',
      pickdata: {
        startTime: '',
        endTime: '',
      },
      startmonth:'',
      endmonth:'',
      postnumber2:[],
      monthnumber2:[],
      interlocutionnumber2:[],
      commentsnumber2:[],
      label:[],
      label2:[],
      pieData:[],
      labelname:[],
      labelnumber:[],
      sump:[],
      sumUP:[],
      sumview:[],
      sumcomment:[],
      expert_name:[],
      sumquestion:[],
      sumanswer:[]
    }
  },
  mounted() {

    var data = {
      value: [{
        "name": "Java",
        "value": 213
      },
        {
          "name": "C++",
          "value": 412
        },
        {
          "name": "Vue",
          "value": 342
        },
        {
          "name": "Springboot",
          "value": 441
        },
        {
          "name": "JavaScript",
          "value": 221
        },
        {
          "name": "大数据",
          "value":312
        },{
          "name": "C",
          "value":123
        },{
          "name": "人工智能",
          "value":466
        },{
          "name": "算法",
          "value":321
        },{
          "name": "Python",
          "value":311
        },{
          "name": "C#",
          "value":211
        },{
          "name": "数据库",
          "value":566
        },{
          "name": "HTML",
          "value":566
        },
      ],
      image:""
    }
    echarts.registerTheme('theme',theme)
    var myChart2 = echarts.init(document.getElementById('ciyun'),theme);
    var maskImage = new Image();
    maskImage.src = data.image
    maskImage.onload = function(){
      myChart2.setOption({
        backgroundColor:'#fff',
        tooltip: {
          show: false
        },
        title: {
          text: '标签词云图',
          left: 'center',
          top:"top"
        },
        series: [{
          type: 'wordCloud',
          gridSize: 10,
          sizeRange: [12, 55],
          rotationRange: [-45, 0, 45, 90],
          maskImage: maskImage,
          textStyle: {
            normal: {
              color: function() {
                return 'rgb(' +
                  Math.round(Math.random() * 255) +
                  ', ' + Math.round(Math.random() * 255) +
                  ', ' + Math.round(Math.random() * 255) + ')'
              }
            }
          },
          left: 'center',
          top: 'center',
          // width: '96%',
          // height: '100%',
          right: null,
          bottom: null,
          // width: 300,
          // height: 200,
          // top: 20,
          data: data.value
        }]
      })
    }

    echarts.registerTheme('theme',theme)
    var paixutu = echarts.init(document.getElementById('paixutu'),theme);
    paixutu.setOption({
      title: {
        text: '我的热门帖子top5',
        left: 'center',
        top:"top"
      },
      xAxis: {
        max: 'dataMax',
        name:'数量'
      },
      yAxis: {
        name:'标题名',
        type: 'category',
        data: [],
        inverse: true,
        animationDuration: 200,
        animationDurationUpdate: 200,
        max: 5// only the largest 3 bars will be displayed
      },
      series: [
        {
          realtimeSort: true,
          name: '点赞数',
          type: 'bar',
          data: [],
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          }
        },
        {
          realtimeSort: true,
          name: '阅览数',
          type: 'bar',
          data: [],
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          }
        },
        {
          realtimeSort: true,
          name: '评论数',
          type: 'bar',
          data: [],
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          }
        }
      ],
      legend: {
        orient: 'vertical',
        x:'left',
        y:'top'
      },
      animationDuration: 3000,
      animationDurationUpdate: 3000,
      animationEasing: 'linear',
      animationEasingUpdate: 'linear'
    })

    echarts.registerTheme('theme',theme)
    var paixutu2 = echarts.init(document.getElementById('paixutu2'),theme);
    paixutu2.setOption({
      title: {
        text: '我最常问',
        left: 'center',
        top:"top"
      },
      xAxis: {
        max: 'dataMax',
        name:'提问数'
      },
      yAxis: {
        name:'专家/老师名',
        type: 'category',
        data: [],
        inverse: true,
        animationDuration: 200,
        animationDurationUpdate: 200,
        max: 5// only the largest 3 bars will be displayed
      },
      series: [
        {
          realtimeSort: true,
          name: '提问数',
          type: 'bar',
          data: [],
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          }
        },
        {
          realtimeSort: true,
          name: '回答数',
          type: 'bar',
          data: [],
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          }
        },
      ],
      legend: {
        orient: 'vertical',
        x:'right',
        y:'top'
      },
      animationDuration: 3000,
      animationDurationUpdate: 3000,
      animationEasing: 'linear',
      animationEasingUpdate: 'linear'
    })

    echarts.registerTheme('theme',theme)
    var myChart1 = echarts.init(document.getElementById('main'),theme);
    myChart1.setOption({
      title: {
        text: '标签总热度图',
        left: 'center',
        top:"top"
      },
      tooltip: {},
      xAxis: {
        axisLabel:{interval: 0},
        name: '标签',
        data: []
      },
      yAxis: {
        name: '热度值',
        min: 0,
        max: 100,
        interval: 10,
      },
      series: [
        {
          color: '#5984c5',
          type: 'bar',
          data: []
        }
      ]
    });

    echarts.registerTheme('theme',theme)
    var myChart = echarts.init(document.getElementById('myChart'),theme);
    myChart.setOption({
      legend: {
        orient: 'vertical',
        x:'right',
        y:'top'
      },
      title: {
        text: '我的数据折线图',
        left: 'center',
        top:"top"
      },
      xAxis: {
        name:"月份",
        data: [],
      },
      yAxis: {
        name:"数量",
        splitNumber : 0,
      },
      series: [
        {
          data: [],
          type: 'line',
          name:'发帖数',
          areaStyle: {
            opacity: 0,
            color: 'rgba(236,234,230,0)'
          }
        },
        {
          data: [],
          type: 'line',
          name:'提问数',
          areaStyle: {
            opacity: 0,
            color: 'rgba(227,165,39,0)'
          }
        },
        {
          data: [],
          type: 'line',
          name: '评论数',
          areaStyle: {
            opacity: 0,
            color: 'rgb(241,186,10)'
          }
        },
      ]
    });

    echarts.registerTheme('theme', theme)
    var ping = echarts.init(document.getElementById('ping'),theme);
    ping.setOption({
      title: {
        text: '我的帖子标签饼图',
        left: 'center',
        top:"top"
      },
      series: [
        {
          type: 'pie',
          data: [
          ],
          radius: '40%'
        }
      ],

    });
    this.selectlabel();
    this.selectcountLabel();
    this.selectposttitletop();
    this.selectmyexpertstop();
  },
  methods: {
    selectpostBYmonth() {
      this.startmonth = this.value1[0]
      this.endmonth = this.value1[1]
      console.log(this.startmonth)
      console.log(this.endmonth)
      if (this.value1.length == '0') {
        this.$alert('请输入要查询的月份！', '提示', {
          confirmButtonText: '确定',
          type: 'waring',
        });
      } else {
        this.$http.post('http://localhost:8888/Post/selectsumpostmonth1/' + JSON.parse(localStorage.getItem("users")).id,
          {
            "startmonth": this.startmonth,
            "endmonth": this.endmonth,
          },
          {emulateJSON: true},
        ).then(function (res) {
          if (res.data.code === 200) {
            this.postnumber2 = res.data.data.arry;
            this.monthnumber2 = res.data.data.arrx;
            this.interlocutionnumber2 = res.data.data.arrz;
            this.commentsnumber2 = res.data.data.arrm;
            console.log(this.postnumber2);
            console.log(this.monthnumber2);
            console.log(this.interlocutionnumber2);
            console.log(this.commentsnumber2);
            echarts.registerTheme('theme', theme)
            var myChart = echarts.init(document.getElementById('myChart'), theme);
            myChart.setOption({
              legend: {
                orient: 'vertical',
                x: 'right',
                y: 'top'
              },
              xAxis: {
                name: "月份",
                data: this.monthnumber2,
              },
              series: [
                {
                  data: this.postnumber2,
                },
                {
                  data: this.interlocutionnumber2,
                },
                {
                  data: this.commentsnumber2,
                },
              ]
            });
          } else {
          }
        })
      }
    },
    selectSumInterlocutionBYTime() {
      this.$http.post('http://localhost:8888/Interlocution/selectSumInterlocutionBYTime',
        {
          "creater_id": JSON.parse(localStorage.getItem("users")).id,
          "startTime": this.pickdata.startTime,
          "endTime": this.pickdata.endTime,
        },
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code === 200) {
          this.Interlocutionnumber = res.data.data;
        } else {
        }
      })
    },
    selectSumCommentsBYTime() {
      this.$http.post('http://localhost:8888/Comments/selectSumCommentsBYTime',
        {
          "user_id": JSON.parse(localStorage.getItem("users")).id,
          "startTime": this.pickdata.startTime,
          "endTime": this.pickdata.endTime,
        },
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code === 200) {
          this.Commentsnumber = res.data.data;
        } else {
        }
      })
    },
    selectSum() {
      this.$http.post('http://localhost:8888/Post/selectSum/' + JSON.parse(localStorage.getItem("users")).id,
        {"author_id": JSON.parse(localStorage.getItem("users")).id},
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code === 200) {
          this.sum1 = res.data.data;
        } else {
        }
      })
    },
    onSubmit() {
      console.log(this.valuedate)
      if (this.valuedate.length == '0') {
        this.$alert('请输入要查询的日期！', '提示', {
          confirmButtonText: '确定',
          type: 'waring',
        });
      } else {
        this.pickdata.startTime = this.valuedate[0]
        this.pickdata.endTime = this.valuedate[1]
        console.log(this.pickdata.startTime)
        console.log(this.pickdata.endTime)
        this.$http.post('http://localhost:8888/Post/selectSumBYtime',
          {
            "author_id": JSON.parse(localStorage.getItem("users")).id,
            "startTime": this.pickdata.startTime,
            "endTime": this.pickdata.endTime,
          },
          {emulateJSON: true},
        ).then(function (res) {
          if (res.data.code === 200) {
            this.sum2 = res.data.data;
          } else {
          }
        })
        this.selectSumInterlocutionBYTime();
        this.selectSumCommentsBYTime();
      }
    },
    selectlabel() {
      this.$http.post('http://localhost:8888/Post/selectlabel/' + JSON.parse(localStorage.getItem("users")).id,
        {},
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code === 200) {
          this.label = res.data.data.arrx;
          this.label2 = res.data.data.arry;
          // var a = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
          console.log(this.label);
          echarts.registerTheme('theme', theme)
          var ping = echarts.init(document.getElementById('ping'), theme);
          for (var i = 0; i < this.label.length; i++) {
            this.pieData.push({name: this.label[i], value: this.label2[i]});
            console.log(this.label[i].label_name);
          }
          ping.setOption({
            legend: {
              orient: 'vertical',
              x: 'right',
              y: 'center'
            },
            series: [{
              data: this.pieData
            }]
          })
        } else {
        }
      })
    },
    selectcountLabel() {
      this.$http.post('http://localhost:8888/Post/selectcountLabel',
      ).then(function (res) {
        this.labelname = res.data.data.arrx;
        this.labelnumber = res.data.data.arry;
        console.log(this.labelname);
        console.log(this.labelnumber);
        echarts.registerTheme('theme', theme)
        var myChart1 = echarts.init(document.getElementById('main'), theme);
        myChart1.setOption({
          xAxis: {
            data: this.labelname
          },
          yAxis: {
            name: '热度值',
          },
          series: [
            {
              color: '#5984c5',
              type: 'bar',
              data: this.labelnumber
            }
          ]
        })

      })
    },
    selectposttitletop() {
      this.$http.post('http://localhost:8888/Post/selectposttitletop/' + JSON.parse(localStorage.getItem("users")).id,
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code === 200) {
          this.sump = res.data.data.arrp;
          this.sumUP = res.data.data.arrx;
          this.sumview = res.data.data.arrz;
          this.sumcomment = res.data.data.arry;
          echarts.registerTheme('theme', theme)
          var paixutu = echarts.init(document.getElementById('paixutu'), theme);
          paixutu.setOption({
            xAxis: {
              max: 'dataMax'
            },
            yAxis: {
              data: this.sump,
            },
            series: [
              {
                data: this.sumUP
              },
              {
                data: this.sumview
              },
              {
                data: this.sumcomment
              },
            ],
            legend: {
              show: true
            },
            animationDuration: 3000,
            animationDurationUpdate: 3000,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear'
          })
        } else {
        }
      })
    },
    selectmyexpertstop() {
      this.$http.post('http://localhost:8888/Post/selectmyexpertstop/' + JSON.parse(localStorage.getItem("users")).id,
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code === 200) {
          this.expert_name = res.data.data.arrx;
          this.sumquestion = res.data.data.arry;
          this.sumanswer = res.data.data.arrz;
          echarts.registerTheme('theme', theme)
          var paixutu2 = echarts.init(document.getElementById('paixutu2'), theme);
          paixutu2.setOption({
            xAxis: {
              max: 'dataMax'
            },
            yAxis: {
              data: this.expert_name
            },
            series: [
              {
                data: this.sumquestion
              },
              {
                data: this.sumanswer
              },
            ],
            legend: {
              show: true
            },
            animationDuration: 3000,
            animationDurationUpdate: 3000,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear'
          })
        } else {
        }
      })
    }
  },
  created() {
    this.selectSum();
  }
}
</script>

<style scoped>
.background{
  /*background-image: url("../assets/img/user.jpg");*/
}
.box1{
  width: 100%;
  height: 100px;
  /*border:  1px solid #bbb7b7;*/
  text-align: center;
}
</style>
